<template>
	<view>
		<view v-for="(item, i) in selectList" :key="i">
			<view>{{i+1}}：{{item.name}}</view>

			<u-radio-group
				v-model="item.selectValue"
				placement="column"
				@change="groupChange"
				v-if="item.state == 'radio'"
			>
				<u-radio
					:customStyle="{marginBottom: '8px'}"
					v-for="(item, index) in item.radiolist1"
					:key="index"
					:label="item.name"
					:name="item.id"
				>
				</u-radio>
			</u-radio-group>

			<u-checkbox-group
				v-model="item.selectValue"
				placement="column"
				@change="checkboxChange"
				v-if="item.state == 'checkbox'"
			>
				<u-checkbox
					:customStyle="{marginBottom: '8px'}"
					v-for="(item, index) in item.checkboxList1"
					:key="index"
					:label="item.name"
					:name="item.id"
				>
				</u-checkbox>
			</u-checkbox-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectList: [
					{
						// 单选基本案列数据
						name: '你最喜欢吃的水果是什么，请选择（单选）',
						radiolist1: [
							{
								name: '苹果',
								id: 1,
							},
							{
								name: '香蕉',
								id: 2
							},
							{
								name: '橙子',
								id: 3
							}
						],
						state: 'radio',		//判断是否是单选/多选 （radio单选，checkbox多选）
						selectValue: '',   
					},
					{
						// 多选基本案列数据
						name: '你最喜欢吃的水果有哪一些，请选择（多选）',
						checkboxList1: [
							{
								name: '苹果',
								id: 11
							},
							{
								name: '香蕉',
								id: 12,
							},
							{
								name: '橙子',
								id: 13
							}
						],
						state: 'checkbox', //多选
						selectValue:[], 
					}
				],
				newSelectList: [], // 新数组
			}
		},
		methods: {
			groupChange(n) {
        console.log('单选', n);
				console.log(this.selectList, 111);
      },
			checkboxChange(n) {
				console.log('多选', n);
				console.log(this.selectList, 222);
			}
		}
	}
</script>

<style>

</style>
